<template>
  <div class="dashboard">
    <n-grid :x-gap="24" :y-gap="24" :cols="2">
      <n-grid-item>
        <n-card title="今日考勤" size="small">
          <n-space vertical>
            <n-statistic label="签到时间" :value="checkInTime || '未签到'" />
            <n-statistic label="签退时间" :value="checkOutTime || '未签退'" />
          </n-space>
          <template #action>
            <n-space justify="end">
              <n-button
                type="primary"
                :disabled="isCheckedIn"
                @click="handleCheckIn"
                :loading="loading"
              >
                签到
              </n-button>
              <n-button
                type="info"
                :disabled="!isCheckedIn || isCheckedOut"
                @click="handleCheckOut"
                :loading="loading"
              >
                签退
              </n-button>
            </n-space>
          </template>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card title="本月统计" size="small">
          <n-space vertical>
            <n-statistic label="出勤天数" :value="monthlyStats.attendanceDays || 0" />
            <n-statistic label="准时天数" :value="monthlyStats.onTimeDays || 0" />
            <n-statistic label="迟到次数" :value="monthlyStats.lateDays || 0" />
          </n-space>
        </n-card>
      </n-grid-item>
    </n-grid>
    
    <div class="attendance-records">
      <n-card title="近期考勤记录" size="small" style="margin-top: 24px">
        <n-data-table
          :columns="columns"
          :data="records"
          :pagination="pagination"
          :bordered="false"
        />
      </n-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useMessage } from 'naive-ui'

const message = useMessage()

// 考勤状态
const checkInTime = ref('')
const checkOutTime = ref('')
const isCheckedIn = ref(false)
const isCheckedOut = ref(false)
const loading = ref(false)

// 月度统计
const monthlyStats = reactive({
  attendanceDays: 0,
  onTimeDays: 0,
  lateDays: 0
})

// 表格列定义
const columns = [
  {
    title: '日期',
    key: 'date'
  },
  {
    title: '签到时间',
    key: 'checkInTime'
  },
  {
    title: '签退时间',
    key: 'checkOutTime'
  },
  {
    title: '状态',
    key: 'status'
  }
]

// 考勤记录
const records = ref([])
const pagination = reactive({
  page: 1,
  pageSize: 5,
  showSizePicker: false
})

// 签到处理
const handleCheckIn = async () => {
  loading.value = true
  try {
    // TODO: 调用签到 API
    checkInTime.value = new Date().toLocaleTimeString()
    isCheckedIn.value = true
    message.success('签到成功')
  } catch (error) {
    message.error('签到失败')
  } finally {
    loading.value = false
  }
}

// 签退处理
const handleCheckOut = async () => {
  loading.value = true
  try {
    // TODO: 调用签退 API
    checkOutTime.value = new Date().toLocaleTimeString()
    isCheckedOut.value = true
    message.success('签退成功')
  } catch (error) {
    message.error('签退失败')
  } finally {
    loading.value = false
  }
}

// 加载数据
onMounted(async () => {
  try {
    // TODO: 加载今日考勤状态
    // TODO: 加载月度统计
    // TODO: 加载考勤记录
  } catch (error) {
    message.error('数据加载失败')
  }
})
</script>

<style scoped>
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 